<template>
  <div class="expert-trends middle-wrapper">
    <div class="course-mian">
      <div class="main-l">
        <div class="course-header">
          <div class="course-title otw-2">{{ orderDetails.order.courseName }}</div>
        </div>
        <div class="content">
          <el-image style="width: 360px;height: 226px;margin-right: 34px;"
            :src="getImageUrl(courseDetils.courseData.coverUrl)" fit="cover">
            <template #error>
              <img src="/images/course_default.png" style="width: 100%; height: 100%;">
            </template>
          </el-image>
          <div class="content-r">
            <div class="course-type">{{ courseTypeList.dict[courseDetils.courseData.type] }}</div>
            <div class="r-center">
              <div>
                <span class="label">宣讲地点：</span>
                <span>{{ orderDetails?.order?.location || '' }}</span>
              </div>
              <div>
                <span class="label">联系人：</span>
                <span>{{ orderDetails?.order?.linkMan || '' }}</span>
              </div>
              <div>
                <span class="label">听众人数：</span>
                <span>{{ orderDetails?.order?.listenerCount || '' }}</span>
              </div>
              <div>
                <span class="label">联系人电话：</span>
                <span>{{ orderDetails?.order?.linkManTel || '' }}</span>
              </div>
              <!-- <div>
                <span class="label">听众人数：</span>
                <span>{{ orderDetails?.order?.listenerCount || '' }}</span>
              </div> -->
            </div>
            <div class="r-bottom">
              <el-icon style="margin-right: 9px;">
                <Clock />
              </el-icon>
              {{ format(orderDetails.order.appointTime) }}
              {{ orderDetails.order.timeType == 1 ? '下午场' : '上午场' }}
            </div>
          </div>
        </div>
        <el-tabs v-model="activeName">
          <el-tab-pane label="基础信息" name="0"></el-tab-pane>
        </el-tabs>
        <div class="content-main">
          <div class="brief">课程简介：</div>
          <div class="content-desc otw-10"> {{ courseDetils.courseData.description }}</div>
        </div>
      </div>
      <div class="main-r">
        <div class="recod-title">其他动态</div>
        <div class="content-list">
          <el-scrollbar view-style="padding-right: 35px;" height="100%">
            <div @click="toTrendsDetails(recodItem)" v-for="(recodItem, recodIndex) in recommendList" :key="recodIndex"
              class="recod-item">
              <el-image class="course-img" :src="getImageUrl(recodItem.courseCoverUrl)" fit="cover">
                <template #error>
                  <img src="/images/course_default.png" style="width: 100%; height: 100%;">
                </template>
              </el-image>
              <div class="otw-2" :title="recodItem.title">{{ recodItem.courseName }}</div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default { name: 'ExpertTrends' }
</script>
<script setup>
import { ref } from 'vue';
import { Clock } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router';
import { useSystemStore } from '@/stores/modules/system.js';
import { http } from '@/utils/http/index.js'
import { getImageUrl } from '@/utils/index.js'
import { format } from '@/plugins/moment.js'

const router = useRouter()
const route = useRoute()
const systemStore = useSystemStore()

/**设置头部 */

systemStore.headerType = 'logo_default'
systemStore.headerBgcolor = 'theme-color'
systemStore.headerWidthType = 'middle'
systemStore.headerFontColor = '1'

if (!route.query.id) router.push('/')


const activeName = ref('0')

/**获取订单详情 */
const orderDetails = ref({ order: {}, expert: {}, evaluates: [] })
const getOrderList = () => {
  http.$GET('/Preach/GetPreachOrderDetail', { id: route.query.id }).then(res => {
    if (res.isError) return
    orderDetails.value = res.result
    getCourseDetail(orderDetails.value.order.courseId)
    getOtherOrder()
  })
}
getOrderList()

/**获取课程详情 */
const courseDetils = ref({ courseData: {}, expertData: {} })
const getCourseDetail = (id) => {
  http.$GET('/Preach/GetPreachCourseDetail', { id }).then(res => {
    if (res.isError) return
    courseDetils.value = res.result
    getType()
  })
}

/**课程分类 */
const courseTypeList = ref({ options: [], dict: {} })
const getType = () => {
  http.$POST('/PreachM/GetPreachCourseTypeInfoList', { pageIndex: 1, pageSize: 99 }).then(res => {
    if (res.isError) return
    courseTypeList.value = {
      options: res.result.dataLst,
      dict: res.result.dataLst.reduce((pre, next) => ({ ...pre, [`${next.id}`]: next.courseTypeName }), {})
    }
  })
}


/**其他动态 */
const recommendList = ref([])
const getOtherOrder = () => {
  http.$POST('/PreachM/GetPreachOrderInfoList', {
    pageIndex: 1, pageSize: 8,
    dfi: {
      logic: 0,
      filters: [
        { field: 'Status', operator: 8, value: 1 },
        { field: 'id', operator: 9, value: orderDetails.value.order.id },
      ]
    }
  }).then(res => {
    if (res.isError) return
    recommendList.value = res.result.dataLst
  })
}

const toTrendsDetails = (orderItem) => {
  window.open('/expert-database/expert-trends?id=' + orderItem.id)
}
</script>
<style lang='scss' scoped>
.expert-trends {
  padding-top: 34px;

  .line {
    background-color: #EAEAEA;
    height: 2px;
    margin: 27px 0 34px;
  }

  .course-mian {
    height: 916px;
    display: flex;
    margin-bottom: 98px;

    .main-l {
      flex: 1;
      margin-right: 47px;
      display: flex;
      flex-direction: column;

      .course-header {
        display: flex;
        justify-content: space-between;

        .course-title {
          .img-recommend {
            width: 60px;
            height: 36px;
            display: inline-block;
            margin-right: 6px;
            vertical-align: middle;
          }

          font-size: 28px;
          font-weight: bold;
          color: #333333;
          display: flex;
          align-items: start;
          margin-left: 10px;
          max-width: 82%;
        }

        .button {
          width: 121px;
          height: 34px;
        }
      }

      .content {
        width: 100%;
        margin: 24px 0;
        display: flex;


        .content-l {
          width: 360px;
          height: 226px;
          object-fit: cover;
          display: block;
          margin-right: 34px;
        }

        .content-r {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          color: #961F13;

          .course-type {
            height: 42px;
            background: rgba(161, 38, 50, 0.05);
            opacity: 1;
            border: 1px solid #A92835;
            display: flex;
            align-items: center;
            padding-left: 10px;
            font-size: 20px;
            font-weight: bold;
            color: #961F13;
          }

          .r-center {
            width: 100%;
            font-size: 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            >div {
              width: 49%;
              margin-bottom: 10px;

              span {
                color: #333333;
              }

              .label {
                color: #7C7C7C;
              }

              .author {
                color: #2D67AA;
                cursor: pointer;
              }
            }
          }

          .r-bottom {
            font-size: 18px;
            display: flex;
            align-items: center;
          }
        }
      }

      :deep(.el-tabs) {
        .el-tabs__item {
          font-size: 18px;
        }
      }

      .content-main {
        flex: 1;
        background-color: #FAFAFA;
        padding: 21px 63px 50px 19px;

        .brief {
          font-size: 20px;
          color: #7C7C7C;
          margin-bottom: 16px;
        }

        .content-desc {
          color: #333333;
          font-size: 20px;
        }
      }
    }

    .main-r {
      width: 364px;
      background-color: #FBFBFB;
      box-shadow: 0px 3px 3px 1px rgba(193, 193, 193, 0.16);
      padding: 25px 0 25px 35px;
      height: 100%;

      .recod-title {
        font-size: 20px;
        color: #4B4A58;
        border-bottom: 1px solid #E3E3E3;
        padding-bottom: 8px;
        font-weight: bold;
        position: relative;
        margin-bottom: 15px;

        &::before {
          content: '';
          position: absolute;
          width: 87px;
          height: 3px;
          left: 0;
          bottom: -2px;
          background-color: var(--theme-color);
        }
      }

      .content-list {
        height: calc(100% - 20px);

        .recod-item {
          width: 308px;
          font-size: 15px;
          font-weight: 400;
          color: #333333;
          padding-bottom: 15px;
          border-bottom: 1px dashed #000;
          margin-bottom: 22px;
          cursor: pointer;

          .course-img {
            width: 100%;
            height: 171px;
            object-fit: cover;
            display: block;
            margin-bottom: 27px;
          }
        }
      }
    }
  }
}
</style>